<template>
  <div class="indexpage-container">
    <div class="sidebar">
      <button @click="switchPage('dashboard')">仪表盘</button>
      <button @click="switchPage('user')">用户管理</button>
      <button @click="switchPage('product')">产品管理</button>
      <button @click="switchPage('order')">订单管理</button>
      <button @click="switchPage('settings')">系统设置</button>
    </div>
    <div class="content">
      <component :is="currentPageComponent"></component>
    </div>
  </div>
</template>

<script>
import Dashboard from './controler/dashboard.vue';
import UserManagement from './controler/user_management.vue';
import ProductManagement from './controler/product_management.vue';
import OrderManagement from './controler/order_management.vue';
import SystemSettings from './controler/system_settings.vue';

export default {
  name: 'ControlerPage',
  data () {
    return {
      currentPageComponent: ProductManagement // 默认显示产品管理页面
    }
  },
  methods: {
    switchPage(page) {
      const pageComponentMap = {
        'dashboard': Dashboard,
        'user': UserManagement,
        'product': ProductManagement,
        'order': OrderManagement,
        'settings': SystemSettings
      };
      this.currentPageComponent = pageComponentMap[page]; // 切换到对应的组件
    }
  },
  mounted() {},
  computed: {}
}
</script>

<style scoped>
@import '@/assets/css/indexpage.css';
</style>